<template>

  <!-- 粒子库 -->
  <h2>视频管理系统</h2>
  <div class="login">

    <el-form
        ref="ruleFormRef"
        style="max-width: 600px;z-index: 500;"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="80px"
        class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="username" size="large">
        <el-input v-model="ruleForm.username" />
      </el-form-item>
      <el-form-item label="密码" type="password" size="large" autocomplete="off"  prop="password">
        <el-input
            v-model="ruleForm.password"
            type="password"
            autocomplete="off"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          提交
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>


    <span class="prompt" v-show="isLogin">用户名或密码错误</span>


  </div>
</template>

<script setup>
import {reactive, ref} from 'vue'
import {useRouter} from 'vue-router';
import {employeeLogin} from "@/api/admin-api.js";
import {ElMessage} from "element-plus";
import {useEmployeeStore} from "@/stores/adminStore.js"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.
// import { useUserStore } from '@/stores/userInfo';

// const userStore = useUserStore()

const router = useRouter();
const ruleFormRef = ref()

// 显示错误信息
let isLogin = ref(false)


// 用户名校验
const checkUsername = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('请输入用户名'))
  }
  callback()
}


// 密码校验
const validatePass =  (rule, value, callback) => {
  if (value === '') {
    return callback(new Error('Please input the password'))
  } else {
    const passwordRegex = /^[a-zA-Z0-9]{6,}$/;
    if(!passwordRegex.test(value)){
      return  callback(new Error("密码必须由数字字母组成且长度不小于6位"))
    }
    callback()

  }
}


const ruleForm = reactive({
  username: 'root',
  password: '123456',
})

const rules = reactive({
  password: [{ validator: validatePass, trigger: 'blur' }],
  username: [{ validator: checkUsername, trigger: 'blur' }],
})

const submitForm = (formEl) => {

  // console.log(formEl);
  if (!formEl) return
  formEl.validate( async (valid) => {
    if (valid) {
      console.log('submit!')
      console.log(ruleForm);
      // 发送请求
      // const res = await axios.get(`/employee/login?name=${ruleForm.username}&pass=${ruleForm.password}`)
      // const res = await axios.post("/admin/employee/login",ruleForm)
      let res = null
      try{
        res = await employeeLogin(ruleForm)
        console.log(res.data);
        // const token = res.data.data.token
        const token = res.data.token
        console.log(token);
        localStorage.setItem("auth",token)
        let employeeStore = useEmployeeStore();
        employeeStore.setEmployeeInfo(res.data)
        console.log(employeeStore.employeeInfo)
        await router.push('/admin/home')
      }catch (e){
        console.log(e)
        ElMessage.error(res.message+'root cause:+'+e);
        // 显示错误信息，持续三秒
        isLogin.value = true
        let timer = setTimeout(()=>{
          isLogin.value = false
          clearTimeout(timer)
        },3000)
      }


    } else {
      console.log('error submit!')
    }
  })


}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
<style lang="scss" scoped>
h2{
  position: absolute;
  left: 45%;
  top: 240px;
}
.login{
  // display: flex;
  // justify-content: center;
  // align-items: center;
  // margin: 0 auto;
  position: absolute;
  left: 30%;
  top: 300px;

  .el-form{
    width: 600px;
  }
}
::v-deep .el-form-item__label{
  // color: rgb(211, 23, 23);
  font-size: 18px;
}
.prompt{
  color: red;
  position: relative;
  left: 250px;
}
</style>